<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <meta charset="utf-8">
    <meta name="product" content="Metro UI CSS Framework">
    <meta name="description" content="Simple responsive css framework">
    <meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">

    <link href="${base}/css/metro-bootstrap.css" rel="stylesheet">
    <link href="${base}/css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="${base}/css/iconFont.css" rel="stylesheet">
    <link href="${base}/css/docs.css" rel="stylesheet">
    <link href="${base}/js/prettify/prettify.css" rel="stylesheet">

    <!-- Load JavaScript Libraries -->
    <script src="${base}/js/jquery/jquery.min.js"></script>
    <script src="${base}/js/jquery/jquery.widget.min.js"></script>
    <script src="${base}/js/jquery/jquery.mousewheel.js"></script>
    <script src="${base}/js/prettify/prettify.js"></script>

    <!-- Metro UI CSS JavaScript plugins -->
    <script src="${base}/js/load-metro.js"></script>

    <!-- Local JavaScript -->
    <script src="${base}/js/docs.js"></script>
    <script src="${base}/js/github.info.js"></script>
    <script src="${base}/js/start-screen.js"></script>


    <title>My Test</title>

</head>

<script>
    function getdate(mode) {
        var w_array = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var week = d.getDay();
        if (month < 10) month = "0" + month
        if (day < 10) month = "0" + day
        if (mode == 1)
            return month;
        else if (mode == 2)
            return day;
        else if (mode == 3)
            return year;
        else if (mode == 4)
            return  w_array[week];
    }
</script>

<body class="metro">

<div class="tile-area tile-area-dark">
    <div class="tile-area-title">
        <h1><b class="fg-white">White</b>
            <b class="fg-cyan">Blue</b>
            <b class="fg-white">BBS</b></h1>
    </div>

    <!--   负责检测是否已登陆   -->
    @ if(session.user != false){
    <div class="user-id" onclick="location='${base}/user/${session.user.id}'">
        <div class="user-id-image">
            <span class="icon-user no-display1"></span>
            <img src="${user.headImg!}" class="no-display">
        </div>
        <div class="user-id-name">
            <span class="text-center">欢迎</span>
            <span class="first-name">${session.user.username}</span>
            @ }else{
            <div class="user-id">
                <div class="user-id-name">
                    <span class="text-center"><a href="${base}/regist">现在注册</a></span><br>
                    <span class="text-center">已注册用户请<a href="${base}/toLogin">登陆</a></span>
                    @ }
                </div>
            </div>


            <div class="tile-group six">
                <div class="tile-group-title">Hrefs</div>

                <!--日历功能演示-->
                <a class="tile double bg-violet" data-click="transform">
                    <div class="tile-content">
                        <div class="text-right padding10 ntp">
                            <h1 class="fg-white no-margin" id="date"></h1>

                            <p class="fg-white" id="day"></p>
                        </div>
                    </div>
                    <div class="brand">
                        <div class="label"><h3 class="no-margin fg-white"><span class="icon-calendar"></span></h3></div>
                    </div>
                </a> <!-- end tile -->

                <a class="tile double bg-lightBlue" data-click="transform" href="http://www.baidu.com">
                    <div class="tile-content image">
                        <img src="${base}/img/wb1.png">
                    </div>
                    <div class="brand">
                        <div class="label">百度</div>
                    </div>
                </a>

                <div class="tile double bg-grayLight" data-click="transform" onclick="location='http://shiningacg.jimdo.com/'">
                    <div class="tile-content image">
                        <img src="${base}/img/Shining.png">
                    </div>
                    <div class="brand">
                        <div class="label fg-black">ShiningACG</div>
                    </div>
                </div>
                <!-- end tile -->

                <div class="tile bg-orange" data-click="transform" onclick="location='http://share.shiningacg.org:8059/'">
                    <div class="text-center margin20">
                        <div  class="icon-console large"></div>
                        <h4 class="fg-white">小主机</h4>
                    </div>
                </div>

                <div class="tile bg-orange" data-click="transform" onclick="location='http://www.bilibili.com/index.html'">
                    <div class="tile-content image">
                        <img src="${base}/img/bili.jpg">
                    </div>
                    <div class="brand">
                        <div class="label fg-white">BiliBili</div>
                    </div>
                </div>

                <div class="tile double bg-darkCyan" data-click="transform" onclick="location='http://jwc.xidian.edu.cn/jwglxt.htm'">
                    <div class="text-center margin20">
                        <div  class="icon-screen large"></div>
                        <h4 class="fg-white">垃圾教务处</h4>
                    </div>
                </div>

                <div class="tile double bg-lightRed" data-click="transform" onclick="location='${base}/topic/list'">
                    <div class="text-center margin20">
                        <div  class="icon-earth large"></div>
                        <h4 class="fg-white">Start BBS</h4>
                    </div>
                </div>
                <!-- end tile -->
            </div>
            <!-- End group -->

            <div class="tile-group five">
                <div class="tile-group-title">Hot Topic</div>

                @ for(topic in topicPage.list!){

                <div class="tile quadro bg-lightBlue emails" onclick="location='${base}/topic/${topic.id}'">
                    <div class="tile-content email">
                        <div class="cycle email-image ">
                            <div class="icon-bookmark large"></div>
                        </div>
                        <div class="email-data">
                            <h2 class="fg-dark">${topic.content}</h2>
                        </div>
                        <div class="place-bottom-right padding15"><span class="icon-calendar"></span><span class="text-bold">${topic.createTime!}</span>
                        </div>
                        <div class="place-bottom-left padding15">
                            <span class="icon-star-3" style="padding-left:30px"></span> <span
                                class="text-bold">${topic.pv}</span>
                            <span class="icon-comments" style="padding-left:30px"></span> <span class="text-bold">${topic.postCount}</span>
                        </div>
                    </div>
                </div>

                @ }

            </div>

</body>

<script>
    var div1 = document.getElementById("date");
    div1.innerHTML = getdate(2);
    div1 = document.getElementById("day");
    div1.innerHTML = getdate(4);
</script>
</html>